
  <template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <!--<el-form-item label="项目负责人" prop="projectLeader">
        <el-select
          v-model="queryParams.projectLeaderName"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="专家姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入专家姓名"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="业务类别" prop="businessMerit">
        <!--<el-input
          v-model="queryParams.businessMerit"
          placeholder="请输入业务类别"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />-->
        <el-cascader
          :options="categoryOptions"
          :show-all-levels="false"
          v-model="queryParams.businessMerit"
          :props="{ value: 'id' }"
          @change="getLastNodesBusinessMerit"
          filterable
          style="width: 240px"
          placeholder="请选择业务类别"
        ></el-cascader>
      </el-form-item>
      <!--<el-form-item label="专业类别" prop="professionCategory">
        <el-cascader
            v-model="queryParams.professionCategory"
            :options="professionOption"
            filterable
            :show-all-levels="false"
            :props="{ value: 'id',checkStrictly: true}"
            :collapse-tags="false"
            style="width:240px"
            clearable
            placeholder="请选择专业类别"
            @change="getLastNodesProfessionCategory"
          />
      </el-form-item>-->
      <el-form-item label="业务特长" prop="businessExpertise">
        <el-input 
        v-model="queryParams.businessExpertise"
          placeholder="请输入业务特长"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="行业类别" prop="industryMerit">
        <!--<el-input
          v-model="queryParams.industryMerit"
          placeholder="请输入行业类别"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />-->
        <el-select
          v-model="queryParams.industryMerit"
          placeholder="请选择行业类别"
          size="small"
          style="width: 240px"
          filterable
        >
          <el-option
            v-for="dict in industryOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="常用检索标签" prop="commonSearchTags">
        <el-input
          v-model="queryParams.commonSearchTags"
          placeholder="请输入常用检索标签"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="现所在单位" prop="currentCompany">
        <el-input
          v-model="queryParams.currentCompany"
          placeholder="请输入现所在单位"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="持专家证情况" prop="expertCertification">
        <el-select
          v-model="queryParams.expertCertification"
          placeholder="请选择持专家证情况"
          size="small"
          style="width: 240px"
        >
          <el-option label="建设工程评标专家" value="0"></el-option>
          <el-option label="政府采购专家" value="1"></el-option>
          <el-option label="建设工程评标专家+政府采购专家" value="2"></el-option>
          <el-option label="无" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addExpert">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="addCompanyExpert"
          :disabled="isAddCompany"
        >推荐至企业专家库</el-button>
      </el-col>
    </el-row>
    <div class="tablebox">
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        @sort-change="tableSortChange"
        :default-sort="{prop: 'currentState', order: 'ascending'}"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="专家姓名"
          prop="name"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="110"
        ></el-table-column>
        <el-table-column
          label="专业类别"
          prop="professionCategoryName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          align="left"
        ></el-table-column>
        <el-table-column
          label="职称"
          prop="professionalTitleText"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="80"
        ></el-table-column>
        <el-table-column
          label="手机号"
          prop="phonenumber"
          align="center"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="120"
        ></el-table-column>
        <el-table-column
          label="性别"
          prop="sex"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="80"
        ></el-table-column>
        <el-table-column
          label="年龄"
          prop="age"
          align="center"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="80"
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="currentState"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="100"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.currentState === '1' ? 'info' : 'success'"
              disable-transitions
            >{{scope.row.currentStateText}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="推荐状态"
          prop="recommendStatus"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
          width="100"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.recommendStatus === '0' ? 'info' : 'success'"
              disable-transitions
            >{{scope.row.recommendStatusText}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="190" label="操作">
          <template slot-scope="scope">
            <a @click="handleView(scope.$index, scope.row)">
              <i class="el-icon-view aicon"></i>查看详情
            </a>
            <a @click="handleEdit(scope.$index, scope.row)">
              <i class="el-icon-edit aicon"></i>编辑
            </a>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <tab-expert-modal
      :dialogVisible="tabdialogVisible"
      v-if="tabdialogVisible"
      @changetabdialogVisible="changetabdialogVisible"
      :expertInfo="expertInfo"
      :isPersonal="isPersonal"
    ></tab-expert-modal>
    <expert-modal
      :dialogVisible="dialogVisible"
      v-if="dialogVisible"
      @changedialogVisible="changedialogVisible"
      :expertInfo="expertInfo"
      :dialogType="dialogType"
      :projectLeader="queryParams.projectLeader"
      :isPersonal="isPersonal"
      :pathName="pathName"
    ></expert-modal>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { personalList } from "@/api/projectleader/expertGlance";
import { professionCategory } from '@/api/expert/professionCategory'
import { adminAuthorizeList } from '@/api/projectleader/adminAuthorize'
import { batchAddCompanyExpert } from "@/api/companyLibrary/firmExpert";
import tabExpertModal from '@/components/ExpertModal/tabIndex'
import expertModal from '@/components/ExpertModal'
import aTitle from '@/components/Title'
import { treeselect } from '@/api/system/business_category'
export default {
  name: 'expertGlance',
  components: { tabExpertModal, aTitle, expertModal },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      pathName: 'TJECdocuments/个人专家',
      isPersonal: true,
      dialogType: 0,
      loading: true,
      total: 0,
      tabdialogVisible: false,
      dialogVisible: false,
      categoryOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        name: undefined,
        projectLeader: undefined,
        projectLeaderName: undefined,
        professionCategory: undefined,
        expertCertification: undefined,
        industryMerit: undefined,
      },
      professionOption: [],
      expertInfo: null,
      options: [],
      industryOptions: [],
      // professionProps: {
      //   lazy: true,
      //   lazyLoad (node, resolve) {
      //     const { level } = node;
      //     setTimeout(() => {
      //       const nodes = Array.from({ length: level + 1 })
      //         .map(item => ({
      //           value: ++id,
      //           label: `选项${id}`,
      //           leaf: level >= 2
      //         }));
      //       // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      //       resolve(nodes);
      //     }, 1000);
      //   }
      // },
      tableData: [],
      multipleSelection: [],
      isAddCompany: true
    }
  },
  created () {
    this.queryParams.projectLeader = this.$route.params.id;
    this.getList()
    this.professionList()
    adminAuthorizeList({ leader: this.$route.params.id, role: '1' }).then(res => {
      this.options = res.data
    })
    treeselect().then(res => {
      if (res.code === 200) {
        this.categoryOptions = res.data
      }
    })
    //行业类别
    this.getDicts("sys_industry_type").then(response => {
      this.industryOptions = response.data;
    });
    //this.queryParams.projectLeaderName = JSON.parse(sessionStorage.getItem('userinfo') || {}).nickName
  },
  mounted () { },
  watch: {
    multipleSelection (val) {
      if (val.length > 0) {
        this.isAddCompany = false
      }
      else {
        this.isAddCompany = true
      }
    }
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目负责人工作台/业务系统操作说明-项目负责人工作台-专家清单管理.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目负责人工作台-专家清单管理.xlsx")}`;
    },
    getList () {
      this.queryParams.projectLeader = this.$route.params.id;
      personalList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows.map(item => {
            item.professionCategoryName = (item.professionCategoryName.substring(item.professionCategoryName.length - 1) == ';') ? item.professionCategoryName.substring(0, item.professionCategoryName.length - 1) : item.professionCategoryName;
            if (item.recommendStatus === "0") {
              item.recommendStatusText = "未推荐";
            } else if (item.recommendStatus === "1") {
              item.recommendStatusText = "已推荐";
            }
            if (item.currentState === "0") {
              item.currentStateText = "在用";
            } else if (item.currentState === "1") {
              item.currentStateText = "停用";
            }
            switch (item.professionalTitle) {
              case '0':
                item.professionalTitleText = '中级'
                break;
              case '1':
                item.professionalTitleText = '高级'
                break;
              case '2':
                item.professionalTitleText = '正高级'
                break;
              case '3':
                item.professionalTitleText = '无'
                break;
              case '4':
                item.professionalTitleText = '其他'
                break;
            }

            return item;
          });
          this.total = res.total;
          this.loading = false;
        }
      })

    },
    professionList () {
      professionCategory().then(res => {
        if (res.code === 200) {
          this.professionOption = res.data
        }
      })
    },
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    addExpert () {
      this.dialogType = 0
      this.expertInfo = null
      this.dialogVisible = true
    },
    addCompanyExpert () {
      this.multipleSelection.map(item => {
        item.expertSource = this.queryParams.projectLeader
        return item
      })
      if (this.multipleSelection[0].identityCard) {
        batchAddCompanyExpert(this.multipleSelection).then(res => {
          if (res.code === 200) {
            this.msgSuccess(res.msg)
            this.getList();
          }
          else if (res.code === 500) {
            this.msgError(res.msg)
            this.getList();
          }
        })
      } else {
        this.msgError('请添加身份号！')
      }
    },
    changetabdialogVisible (val) {
      this.tabdialogVisible = val
    },
    changedialogVisible (val) {
      this.dialogVisible = val
      this.getList();
    },
    handleEdit (index, row) {
      this.dialogType = 1
      this.expertInfo = row
      this.dialogVisible = true
    },
    handleView (index, row) {
      this.expertInfo = row
      this.tabdialogVisible = true
    },
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getLastNodesBusinessMerit (val) {
      this.queryParams.businessMerit = val[val.length - 1];
    },
    getLastNodesProfessionCategory (val) {
      this.queryParams.professionCategory = val[val.length - 1];
    },
    tableSortChange (column) {
      this.queryParams.pageNum = 1;
      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },change(e) {
      this.$forceUpdate();
    }
  }
}

</script>
<style lang="scss" scoped>
.tabletitle {
  margin: 0 20px;
  .input-wrap {
    padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 6em;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 8px;
      display: flex;
      align-items: center;
      flex: 0 0 90px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100%;
}

.tablebox {
  height: 100%;
}
/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin: 0 10px;
  }
}
</style>




